# 动效开发 6：动效之效

回头看看，我们花了 5 个小节来啰唆「动效开发」的「动」：

• 如何动 —— 第 5 小节《让它动起来》
• 立体地动 —— 第 6 小节《聊一聊 3D》
• 让浏览器帮忙动 —— 第 7 小节《补间动画》
• 一帧一帧地动 —— 第 8 小节《逐帧动画》
• 让 SVG 动 —— 第 9 小节《SVG 动画》

我们花费力气去做的事情毋庸置疑是重要的，但它距离突破也许还差一点别的东西。就好比一个歌手拼命练习各种花式唱法 —— 高音、颤音、延音无所不能，但缺了情感就算不上伟大的歌手。动效开发也是一样的道理，「动」是招式是基本要求，而「效」才是真正的修炼之道。

我们思考动效之「效」，其实就是要思考如何让我们做出来的动画具备最佳的体验效果，它包括两个方面的内容：

• 感官体验 —— 如何「动」得自然、有情感、能吸引人？
• 物理性能 —— 如何「动」得更流畅？

“要写 CSS3 动画，必先学技术。要写好 CSS3 动画，还是得深入探索传统动画的精华。” —— EC，京东凹凸实验室首席动效开发

对于「如何提升动画的体验效果」这个话题，我们不妨先以电影之眼来看看 CSS3 动画，也许能从中窥得一些门道。

# 以电影之眼看 CSS3 动画

CSS3 动画的变形基础（transform）包含 4 种变形方式（translate、rotate、scale、skew），同时还可设置 2D、3D、变形原点（transform-origin）、透视（perspective）、透视原点（perspective-origin）等等特性；动画时间轴函数包含 9 种基本模式（ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps），甚至还可以使用 cubic-bezier 写出任何你想要的模式；再加上动画持续时间（animation-duration）等设定，各种排列组合，CSS3 动画简直拥有了整个世界。

# 关键帧与时间轴

根据 维基 的释义，动画是指由许多帧静止的画面，以一定的速度（如每秒 16 张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品（GIF 图片正是运用这种原理）。因此最初的动画是通过几张快速翻动的连续画面制作而成，而后经历了电影摄影技术的出现、电脑科技的进步，逐渐转向数字化。

将上面的 GIF 拖入 PS 之后打开时间轴窗口即可看到每一帧的画面：

无论是 2D 还是 3D 动画，关键帧，正如其名，是动画制作中最关键的部分，同时也是最难把握的部分。曾经有位设计师告诉我，在大学的第一节 flash 课的课后作业，老师要求大家上交一份小球动画，包含气球、石球与皮球，并告诉大家，以相同的外观表现出不同的质感是在考验你对关键帧的悟性，而这一个作业就能体现你是否适合学习动画。

A 需要很大的力才能使一个炮弹移动。一旦它移动了，同样需要很大的力才能阻挡它前进。 B 一只气球只需要很小的力去移动它，但空气阻力使它很快停止动作。 这两个例子都画了动作分格线，可以看出在银幕上表现物体的轻重，取决于对它们动作的时间掌握。 ——《动画的时间掌握》

在《动画制作流程介绍》提供的视频中可以看到关键帧在动画制作中所起的地基般的作用。

（画面上方的手绘图即为「怪物公司」的关键帧）

与关键帧紧密关联的即为时间轴（或摄制表），时间轴是补齐中间帧不可或缺的一项，在传统动画制作中，导演就是通过制定时间轴来掌控整部动画的节奏的。

在 CSS3 中，@keyframes 正是动画的关键帧容器。@keyframes 中包含的包括 transform 在内的元素形态设定构成了关键帧的画面。@keyframes 中的百分比即为时间轴的体现。中间帧则由浏览器自动完成（回顾第 7 小节的补间动画）。

现在我们知道了 CSS3 动画的结构与传统动画之间的关系，重点来了， CSS3 动画可以做出一部动画电影吗？

# 用 CSS3 动画做一部动画电影

现在就让我们来探讨一下用 CSS3 动画做一部吸引人的动画电影都需要些什么。

# 首先，你需要一个故事

首先你需要一个故事，即使只是一堆雪花往下掉，也是包含故事的——为什么下雪？是冬天来了？那是冬天的第一场雪吗？第一场雪有什么特点呢？好吧，作为一个从没见过雪的南方人，我承认我给自己挖了个坑，不过就是类似这种思路，让我们拥有了一个故事，所以，即使只有一秒钟的动画也是有故事的。Use your imagination.

小贴士：在做影视题材的专题页时，我会首先根据相关影视的预告片确定入场动画的风格与基调，观看预告片不仅能够了解影片的风格，同时还能学习其字幕出现、消失以及转场的方式，获得一种节奏感，也就是上面所说的时间掌控。在看电影正片时也可留意影片开头与结尾字幕出现的形式，尤其是科幻片，电影字幕的设计与电影风格相辅相成，常常能让你脑洞大开——原来还能这么玩。